// 移动登录
<template>
  <div>
    <wapHeader></wapHeader>
    <div class="loginWarp">
      <div class="login-container">
        <div class="login_title">{{ loginArr.login }}</div>
        <div class="login_item">
          <el-input
            v-model="loginForm.account"
            class="inp"
            size="large"
            clearable
            :placeholder="$t('vr.emailphone')"
          ></el-input>
        </div>
        <div class="login_item">
          <el-input
            type="password"
            autocomplete="new-password"
            v-model="loginForm.password"
            :placeholder="$t('vr.password')"
            class="inp"
            size="large"
            clearable
            show-password
          ></el-input>
        </div>
        <div class="login_item_switch">
          <el-switch
            v-model="rememberOn"
            active-color="#ff4949"
            @change="rememberMeChange"
          ></el-switch>
          <span>{{ $t("vr.rememberme") }}</span>
        </div>
        <div class="login_item">
          <el-button
            type="danger"
            size="large"
            class="loginBtn"
            :disabled="disabled"
            :loading="btnLoading"
            @click="handleSubmit"
            >{{ $t("vr.login") }}</el-button
          >
          <!-- // @keypress.native.enter="handleSubmit" -->
        </div>
        <div class="login_row">
          {{ $t("vr.noaccount") }}
          <span @click="register">{{ $t("vr.registerRow") }}</span>
        </div>
        <div @click="forgetFun" class="forget">
          <a>{{ $t("vr.forgetpass") }}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import api from "servicePath/index";
import wapHeader from "../common/back.vue";
import md5 from "md5";
export default {
  data() {
    return {
      btnLoading: false,
      loginForm: {
        account: "", //用户名
        password: "" // 密码
      },
      rememberOn: false,
      accountKey: "userAccount",
      passwordKey: "userPassword",
      rememberKey: "isRememberMe"
    };
  },
  components: {
    wapHeader
  },
  computed: {
    // 获取语言
    ...mapState(["lang"]),
    // 根据语言修改名称
    loginArr() {
      const arr = {
        login: this.$t("vr.login")
      };
      return arr || {};
    },
    // 按钮是否禁用
    disabled() {
      return !(this.loginForm.account && this.loginForm.password);
    }
  },
  mounted() {
    console.log("mounted");
    var isRemember = localStorage.getItem(this.rememberKey);
    if (isRemember == 1) {
      var account = localStorage.getItem(this.accountKey);
      var password = localStorage.getItem(this.passwordKey);
      this.loginForm.account = account;
      this.loginForm.password = password;
      this.rememberOn = true;
    } else {
      this.rememberOn = false;
    }
  },
  methods: {
    ...mapMutations([
      "isShowLogin",
      "changeVrToken",
      "changeHeaderToken",
      "saveloginInfo"
    ]), // 修改vuex中的登录数据
    async handleSubmit() {
      if (this.rememberOn == 1) {
        console.log("记住账号密码");
        localStorage.setItem(this.accountKey, this.loginForm.account);
        localStorage.setItem(this.passwordKey, this.loginForm.password);
        localStorage.setItem(this.rememberKey, 1);
      } else {
        console.log("清除账号密码");
        localStorage.removeItem(this.accountKey);
        localStorage.removeItem(this.passwordKey);
        localStorage.removeItem(this.rememberKey);
      }

      const params = {
        account: this.loginForm.account,
        password: md5(this.loginForm.password)
      };
      this.btnLoading = true;
      console.log(this.loginArr);
      try {
        const res = await api.getLogin(params);
        console.log(res);
        this.btnLoading = false;
        // 存入token
        this.changeVrToken(res.data.token);
        // 设置上传头部token
        this.changeHeaderToken(res.data.token);
        const roles = res.data.roles;
        // 登录成功
        this.$message({
          message:
            this.lang == "en"
              ? "Login successful"
              : this.lang == "de"
              ? "Anmelden erfolgreich"
              : "登录成功",
          type: "success"
        });
        this.isShowLogin(""); // 隐藏登录
        this.saveloginInfo(res.data); //存用户信息
        sessionStorage.setItem("loginInfo", JSON.stringify(res.data)); // 存数据
        this.$router.replace({
          path: "home"
        });
      } catch (err) {
        this.btnLoading = false;
      }
    },
    register() {
      this.isShowLogin(""); //隐藏登录
      this.$router.push({
        path: "register"
      });
    },
    //去忘记密码页
    forgetFun() {
      let r = "/foundation/wap/forget";
      if (this.$route.path.indexOf("/fakuma") >= 0) {
        r = "/fakuma/wap/forget";
      }
      this.$router.push(r);
    },
    rememberMeChange(value) {
      console.log("isRememberMe", value);
      this.rememberOn = value;
    }
  }
};
</script>
<style lang="scss" scoped>
.login_item /deep/ .el-input__inner {
  height: 52px;
  line-height: 52px;
  border: none;
  background: #ffffff;
  box-shadow: 0px 5px 15px rgba(27, 27, 78, 0.1);
  opacity: 1;
  border-radius: 10px;
}

.login_item /deep/ button {
  height: 52px;
  box-shadow: 0px 5px 15px rgba(84, 93, 255, 0.3);
  border-radius: 10px;
}

.loginWarp {
  width: 100%;
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.login-container {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 20px 27px;
  .login_title {
    font-size: 38px;
    font-weight: bold;
    padding-bottom: 49px;
    color: #1b1b4e;
    position: relative;
  }
  .login_item {
    margin-bottom: 30px;
    .loginBtn {
      margin-top: 30px;
      width: 100%;
      font-size: 16px;
      background: linear-gradient(to right, #ff7f41, #e6007e);
    }
  }
  .login_item_switch {
    span {
      font-size: 12px;
      color: #d8d8d8;
      margin-left: 15px;
    }
  }
  .login_row {
    text-align: center;
    font-size: 12px;
    color: #d8d8d8;
    span {
      color: #ff4949;
      cursor: pointer;
    }
  }
  .forget {
    text-align: center;
    padding-top: 20px;
    a {
      font-size: 12px;
      color: #d8d8d8;
    }
  }
}
</style>
